<template>
  <div class="home-container">
    <div class="nav">
      <router-link to="/">首页</router-link>
      <router-link to="/about" style="margin-left: 10px">关于</router-link>
    </div>
    <div class="counter">
      <div>加1：{{ counter }}</div>
      <div>加倍：{{ doubleCounter }}</div>
      <button @click="count.increment()">+1</button>
    </div>
  </div>
</template>
<script setup lnag="ts">
import { useCounter } from "@/store";
import { storeToRefs } from "pinia";
 
const count = useCounter();
const { counter, doubleCounter } = storeToRefs(count);
 
</script>
<style scoped lang="scss">
.home-container {
  .nav {
    font-size: 30px;
  }
}
</style>